import React, { Component } from 'react'
import './index.less'
import Goback from '@/components/Goback'
import { ChoosePageApi } from '@/request/api'
import { connect } from 'react-redux'
import { alertMapDispatchToProps, showHideAlert } from '@/utils'

class Choose extends Component {
  state = {
    // 题目类型数组
    cateArr: [],
    // 当前题目
    cateActive: 'all',
    // 试题分类数组
    // all  全部, err   错误, done 已做, notdone 没做
    testArr: [
      {key: 'all' , cn: '全部'},
      {key: 'err' , cn: '错误'},
      {key: 'done' , cn: '已做'},
      {key: 'notdone' , cn: '没做'}
    ],
    // 当前试题
    testActive: 'all',
    // 做题数量
    numArr: [5, 10, 20, 30, 50, 100],
    // 当前做题数量
    numActive: 5
  }
  componentDidMount() {
    // console.log(this.props.match.params.code);
    let actionCode = this.props.match.params.code
    ChoosePageApi({
      actionCode,
      testType: this.state.testActive
    }).then(res => {
      if (res.errCode === 0) {
        // console.log(res);
        // 深拷贝
        let newArr = JSON.parse(JSON.stringify(res.data))
        newArr.map(item => {
          switch (item.key) {
            case 'all':
              item.cn = '全部';
              break;
            case 'qa':
              item.cn = '问答';
              break;
            case 'fill':
              item.cn = '填空';
              break;
            case 'one':
              item.cn = '单选';
              break;
            case 'check':
              item.cn = '判断';
              break;
            case 'code':
              item.cn = '编程';
              break;
            case 'many':
              item.cn = '多选';
              break;
            default:
              break;
          }
        })
        this.setState({ cateArr: newArr }, () => {
          console.log(this.state.cateArr);
        })
      }
    }).catch(err => {
      // console.log(err.response.data.errCode);
      if (err.response.data.errCode === 1002) {
        showHideAlert(this.props, {
          icon: 'error',
          title: err.response.data.message
        })
        setTimeout(() => {
          this.props.history.push('/login')
        },1500)
      }
    })
  }
  examFn() {
    showHideAlert(this.props, {
      icon: 'warning',
      title: '该功能暂未开放'
    })
  }
  practiceFn() {
    this.props.history.push({
      pathname: '/practice',
      state: {
        testNum: this.state.numActive,
        testType: this.state.testActive,
        actionCode: this.props.match.params.code,
        questionType: this.state.cateActive
      }
    })
  }
  render() {
    return (
      <div className='choose'>
        <div className="top_btns">
          <div className="top_btn1" onClick={this.practiceFn.bind(this)}>进入练习模式</div>
          <div className="top_btn2" onClick={this.examFn.bind(this)}>进入考试模式</div>
        </div>
        <div className="mytitle">试题分类</div>
        <ul className="tabs">
          {this.state.testArr.map((item, index) => (
            <li key={index} className={this.state.testActive === item.key ? 'active' : ''}
            onClick={() => this.setState({testActive: item.key})}>{item.cn}</li>
          ))}
        </ul>
        <div className="mytitle">题目分类</div>
        <ul className="tabs">
          {
            // forEach没有返回值
            this.state.cateArr.map((item, index) => {
              return <li key={index}
                className={this.state.cateActive === item.key ? 'active' : ''}
              onClick={() => this.setState({cateActive: item.key})}>{item.cn}({item.value})</li>
            }
          )}
        </ul>
        <div className="mytitle">做题数量</div>
        <ul className="tabs">
          {this.state.numArr.map((item, index) => (
            <li key={index}
              className={this.state.numActive === item ? 'active' : ''}
            onClick={() => this.setState({numActive: item})}>{item}</li>
          ))}
        </ul>
        <Goback/>
      </div>
    )
  }
}
export default connect(null,alertMapDispatchToProps)(Choose)
